{#
┌────────────────────────────────────────────────────────────────────────────────────┐
│                                 #global-container                                  │
│   ┌─────┐   ┌──────────────────────────────────────────────────────────────────┐   │
│   │     │   │                         #page-container                          │   │
│   │     │   │   ┌──────────────────────────────────────────────────────────┐   │   │
│   │     │   │   │                      #global-header                      │   │   │
│   │     │   │   └──────────────────────────────────────────────────────────┘   │   │
│   │     │   │                                                                  │   │
│   │     │   │   ┌──────────────────────────────────────────────────────────┐   │   │
│   │     │   │   │                          #main                           │   │   │
│   │  #  │   │   │   ┌──────────────────────────────────────────────────┐   │   │   │
│   │  g  │   │   │   │                #header-container                 │   │   │   │
│   │  l  │   │   │   └──────────────────────────────────────────────────┘   │   │   │
│   │  o  │   │   │                                                          │   │   │
│   │  b  │   │   │   ┌──────────────────────────────────────────────────┐   │   │   │
│   │  a  │   │   │   │                  #main-content                   │   │   │   │
│   │  l  │   │   │   │   ┌─────┐   ┌──────────────────────┐   ┌─────┐   │   │   │   │
│   │  -  │   │   │   │   │     │   │                      │   │     │   │   │   │   │
│   │  s  │   │   │   │   │  #  │   │                      │   │  #  │   │   │   │   │
│   │  i  │   │   │   │   │  s  │   │                      │   │  d  │   │   │   │   │
│   │  d  │   │   │   │   │  i  │   │                      │   │  e  │   │   │   │   │
│   │  e  │   │   │   │   │  d  │   │       #content       │   │  t  │   │   │   │   │
│   │  b  │   │   │   │   │  e  │   │                      │   │  a  │   │   │   │   │
│   │  a  │   │   │   │   │  b  │   │                      │   │  i  │   │   │   │   │
│   │  r  │   │   │   │   │  a  │   │                      │   │  l  │   │   │   │   │
│   │     │   │   │   │   │  r  │   │                      │   │  s  │   │   │   │   │
│   │     │   │   │   │   │     │   │                      │   │     │   │   │   │   │
│   │     │   │   │   │   └─────┘   └──────────────────────┘   └─────┘   │   │   │   │
│   │     │   │   │   │                                                  │   │   │   │
│   │     │   │   │   └──────────────────────────────────────────────────┘   │   │   │
│   │     │   │   │                                                          │   │   │
│   │     │   │   └──────────────────────────────────────────────────────────┘   │   │
│   │     │   │   ┌──────────────────────────────────────────────────────────┐   │   │
│   │     │   │   │                      #global-footer                      │   │   │
│   │     │   │   └──────────────────────────────────────────────────────────┘   │   │
│   └─────┘   └──────────────────────────────────────────────────────────────────┘   │
│                                                                                    │
└────────────────────────────────────────────────────────────────────────────────────┘
#}

{% extends "_layouts/basecp" %}

{# The CP only supports queue components that implement QueueInterface #}
{% set queue = craft.app.queue %}
{% js %}
    {% if queue is instance of("craft\\queue\\QueueInterface") %}
        Craft.cp.setJobInfo({{ queue.getJobInfo(100)|json_encode|raw }}, false);
        {% if queue.getHasReservedJobs() %}
            Craft.cp.trackJobProgress(true);
        {% elseif queue.getHasWaitingJobs() %}
            Craft.cp.runQueue();
        {% endif %}
    {% else %}
        Craft.cp.enableQueue = false;
    {% endif %}
{% endjs %}

{% set hasSystemIcon = CraftEdition == CraftPro and craft.rebrand.isIconUploaded %}
{% set fullPageForm = (fullPageForm is defined and fullPageForm) %}

{% set editionName = craft.app.getEditionName() %}
{% set canUpgradeEdition = craft.app.getCanUpgradeEdition() %}
{% set licensedEdition = craft.app.getLicensedEdition() %}
{% set isTrial = licensedEdition is not same as(null) and licensedEdition is not same as(CraftEdition) %}

{% set sidebar = (sidebar ?? block('sidebar') ?? '')|trim %}
{% set toolbar = (toolbar ?? block('toolbar') ?? '')|trim %}
{% set actionButton = (block('actionButton') ?? '')|trim %}
{% set details = (details ?? block('details') ?? '')|trim %}
{% set footer = (footer ?? block('footer') ?? '')|trim %}
{% set crumbs = crumbs ?? null %}
{% set tabs = tabs is defined and tabs|length != 1 ? tabs : null %}

{% set mainContentClasses = [
    sidebar ? 'has-sidebar',
    details ? 'has-details',
    tabs ? 'has-tabs',
]|filter %}

{% set showHeader = showHeader ?? true %}
{% if not showHeader %}
    {% set bodyClass = (bodyClass ?? [])|explodeClass|push('no-header') -%}
{% endif %}

{% set mainAttributes = {
    id: 'main',
    role: 'main',
}|merge(mainAttributes ?? []) %}

{% set mainFormAttributes = {
    'id': 'main-form',
    'method': 'post',
    'accept-charset': 'UTF-8',
    'novalidate': true,
    'data': {
        'saveshortcut': saveShortcut ?? true,
        'saveshortcut-redirect': (saveShortcutRedirect ?? false) ? saveShortcutRedirect|hash : false,
        'saveshortcut-scroll': retainScrollOnSaveShortcut ?? false,
        'actions': formActions ?? false,
        'confirm-unload': true,
        'delta': view.getIsDeltaRegistrationActive(),
    },
}|merge(mainFormAttributes ?? [], recursive=true) %}

{% set userPhoto %}
    <div class="header-photo">
        {{ tag('img', {
            width: 30,
            height: 30,
            sizes: '30px',
            srcset: "#{currentUser.getThumbUrl(30)} 30w, #{currentUser.getThumbUrl(60)} 60w",
            alt: currentUser.getName(),
        }) }}
    </div>
{% endset %}

{% block body %}
    <div id="global-container">
        {% include '_layouts/components/global-sidebar' %}

        <div id="page-container">
            {% include '_layouts/components/alerts' %}
            {% include '_layouts/components/notifications' %}

            <div id="global-header" role="region" aria-label="{{ 'My Account'|t('app') }}">
                <div class="flex">
                    {% include '_layouts/components/crumbs' %}
                    <div class="flex-grow"></div>
                    <button type="button" id="user-info" class="btn menubtn" aria-label="{{ 'My Account'|t('app') }}" title="{{ 'My Account'|t('app') }}" data-menu-anchor=".header-photo">
                        {{ userPhoto }}
                    </button>
                    <div class="menu" data-align="right">
                        <ul>
                            <li>
                                <a href="{{ url('myaccount') }}" class="flex flex-nowrap">
                                    {% if currentUser.photoId %}
                                        {{ userPhoto }}
                                    {% endif %}
                                    <div class="flex-grow">
                                        <div>{{ currentUser.username }}</div>
                                        {% if not craft.app.config.general.useEmailAsUsername %}
                                            <div class="light smalltext">{{ currentUser.email }}</div>
                                        {% endif %}
                                    </div>
                                </a>
                            </li>
                        </ul>
                        <hr>
                        <ul>
                            <li><a href="{{ url('logout') }}">{{ "Sign out"|t('app') }}</a></li>
                        </ul>
                    </div>
                </div>
            </div>

            <div id="main-container">
                <main {{ attr(mainAttributes) }}>

                    {% if fullPageForm -%}
                        <form {% block mainFormAttributes %}{{ attr(mainFormAttributes) }}{% endblock %}>
                            {{- csrfInput() }}
                    {%- endif %}

                    {% if showHeader %}
                        <div id="header-container">
                            <header id="header">
                                {% block header %}
                                    <div id="page-title" class="flex flex-nowrap{% if toolbar %} has-toolbar{% endif %}">
                                        {% block pageTitle %}
                                            {% if title is defined and title|length %}
                                                <h1 title="{{ title }}">{{ title }}</h1>
                                            {% endif %}
                                        {% endblock %}
                                        {% block contextMenu %}{% endblock %}
                                    </div>
                                    {% if toolbar %}
                                        <div id="toolbar" class="flex flex-nowrap">
                                            {{ toolbar|raw }}
                                        </div>
                                    {% endif %}
                                    {% if actionButton %}
                                        <div id="action-button" class="flex">
                                            {{ actionButton|raw }}
                                        </div>
                                    {% endif %}
                                {% endblock %}
                            </header><!-- #header -->
                        </div>
                    {% endif %}

                    <div id="main-content" class="{{ mainContentClasses|join(' ') }}">
                        {# sidebar #}
                        {% if sidebar %}
                            <div id="sidebar-toggle-container">
                                <button type="button" id="sidebar-toggle" class="btn menubtn"><span id="selected-sidebar-item-label"></span></button>
                            </div>
                            <div id="sidebar-container">
                                <div id="sidebar" class="sidebar">
                                    {{ sidebar|raw }}
                                </div>
                            </div>
                        {% endif %}

                        {# content-container #}
                        <div id="content-container">
                            {% block main %}
                                {% block tabs %}
                                    {% if tabs %}
                                        {% include "_includes/tabs" %}
                                    {% endif %}
                                {% endblock %}

                                <div id="content" class="content-pane">
                                    {% block content %}
                                        {{ content is defined ? content }}
                                    {% endblock %}

                                    {# footer #}
                                    {% if footer %}
                                        <div id="footer" class="flex">
                                            {{ footer|raw }}
                                        </div>
                                    {% endif %}
                                </div>
                            {% endblock %}
                        </div><!-- #content-container -->

                        {% if details is not empty %}
                            <div id="details-container">
                                <div id="details">
                                    {{ details|raw }}
                                </div>
                            </div>
                        {% endif %}
                    </div><!-- #main-content -->

                    {% if fullPageForm -%}
                        </form><!-- #main-form -->
                    {%- endif %}
                </main><!-- #main -->
            </div><!-- #main-container -->

            <footer id="global-footer">
                <div id="edition-logo" title="{{ '{edition} edition'|t('app', {edition: editionName}) ~ (isTrial ? ' ' ~ '(trial)'|t('app')) }}" aria-label="{{ '{edition} edition'|t('app', {edition: editionName}) ~ (isTrial ? ' ' ~ '(trial)'|t('app')) }}">
                    <div class="edition-name">{{ editionName }}</div>
                    {% if isTrial %}
                        <div class="edition-trial">{{ "Trial"|t('app') }}</div>
                    {% endif %}
                </div>
                <ul id="app-info">
                    <li>Craft CMS {{ craft.app.version }}</li>
                    {% if canUpgradeEdition %}
                        <li>
                            <a class="go" href="{{ url('plugin-store/upgrade-craft') }}">{{ isTrial ? 'Buy Craft Pro'|t('app') : 'Upgrade to Craft Pro'|t('app') }}</a>
                        </li>
                    {% endif %}
                </ul>
            </footer>

        </div><!-- #page-container -->
    </div><!-- #global-container -->
{% endblock %}


{% block actionButton %}
    {% if fullPageForm %}
        <div class="btngroup">
            {% block submitButton %}
                <button type="submit" class="btn submit">{{ 'Save'|t('app') }}</button>
            {% endblock %}
            {% if formActions ?? false %}
                <button type="button" class="btn submit menubtn"></button>
                {% include '_layouts/components/form-action-menu' %}
            {% endif %}
        </div>
    {% endif %}
{% endblock %}


{% if currentUser.can('performUpdates') and not craft.app.updates.getIsUpdateInfoCached() %}
    {% js %}
        Craft.cp.checkForUpdates();
    {% endjs %}
{% endif %}
